Play framework 2.0でJSONPを使う

#Play Framework

中村修太

2012.04.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

JSONPとは？

JSONPとは、HTMLのscriptタグを使用してクロスドメインなデータを取得する仕組みです。 JSONでデータをやりとりする場合、通常は同一以外と通信することはできません。しかし、HTMLのscriptタグのsrcに別ドメインのURLを指定して通信できる点を利用し、別ドメインのサーバからデータを取得することが可能になります。

JSONPではレスポンスの内容がjavascript関数呼び出しの形式となります。そのため、src属性に指定するURLにその関数の名前をクエリ文字列として加えます。

    <script type='text/javascript' 
     src='http://anotherDomain.com/getData?callback=foo'>

そしてレスポンスとして、下記のようなJSON形式のデータを引数とする関数の呼び出し文が返されます。

    foo({"name":"syuta","age":30})

JSONPでレスポンスを受け取る

Playframework 2.0では最初からJSONをサポートしていますが、JSONPについては独自で実装する必要がありました。しかし、現時点のHEADではJSONPのためのヘルパクラスが実装されているようなので、その紹介をします。

今回使用した動作環境は以下のとおりです。現状リリースされているPlayframewor2.0ではJSONPのサポートが実装されていないため、HEADを取得してビルドします

OS : MacOS X 10.7.3
Playframework : HEAD
Java : 1.6.0_26

注意: この記事ではgithubから取得したHEAD版を使用して試しています。正式リリース前の状況のため思わぬ不具合が生じるかもしれませんので、ご了承ください。

ソースのHEADを取得してセットアップ

まだgithubからソースを取得していない人は、play2.0のソースを取得してビルドしましょう。

$ git clone https://github.com/playframework/Play20.git
$ cd Play20/framework
$ ./build
> complile
> build-repository
> publish-local

すでにソースを取得している人は、最新の状態に更新してビルドします。

$ git pull
$ cd Play20/framework
$ ./cleanEverything
$ ./build
> compile
> build-repository
> publish-local

これで準備ができました。

プロジェクト作成

Scalaベースのプロジェクトを作成し、sbtコンソールを起動します。

% play new jsonp
% cd jsonp
% play

ソースをEclipseで編集したいなら、eclipsifyを実行してeclipseプロジェクト化してインポートしてソースの修正をしましょう。

>[jsonp] $ eclipsify

サンプルコードを記述

今回はlocalhost:9000にアクセスしたらJSONPで通信を行い、結果をログに表示するだけの簡単なサンプルを作成します。まずはデフォルトのコントローラを修正します。

package controllers

import play.api._
import play.api.mvc._

import play.api.libs.json._
import play.api.libs.json.Json._
import play.api.libs.Jsonp

object Application extends Controller {
  
  def index = Action {
    Ok(views.html.index("Your new application is ready."))
  }

  def jsonpService(callback:String) = Action {
	val json = JsObject(List("foo" -> JsString("bar")))
	Ok(Jsonp(callback, json))
  }
  
}

jsonpServiceメソッドでは、callbackパラメータを受け取ります。そしてJSONデータを生成し、　JSONPクラスでラップして返します。このメソッドをroutesファイルで指定しましょう。

GET  /jsonp-service                 controllers.Application.jsonpService(callback: String)

コントローラができたら、index.scala.htmlを修正します。アクセス時にjQueryを使用してJSONP通信をするようにしてみましょう。

@(message: String)

@main("JSONP in Play 2.0") {    
	<script type="text/javascript">
	  $(function() {
	    $.ajax({
	      url: "http://localhost:9000/jsonp-service",
	      dataType: "jsonp",
	      success:function(json){
	        console.dir(json);
	      },
	      error:function(){
	        alert('error');
	      }  
	    });
	  });
	</script>
    Hello!
}

これでアクセスすると、取得したJSONPデータがログに表示されます。今回は同一ドメイン上で動作確認しましたが、別ドメインでも問題なく動作します。